<template>
	<div class="dialogBox">
		<el-dialog title="绑定广告账户" :visible.sync="visible" width="30%" @close="reset" append-to-body>
			<el-form :model="search" size="medium" ref="formRef" :rules="rules">
				<el-form-item label="所属部门" label-width="100px" prop="dept_ids">
					<cl-cascader
						clearable
						placeholder="请选择部门"
						v-model="search.dept_ids"
						:options="deptList"
						:props="{
							value: 'dept_id',
							label: 'dept_name'
						}"
						@change="changeDept"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="推广人" label-width="100px" prop="user_id">
					<el-select
						v-model="search.user_id"
						placeholder="请选择推广人"
						filterable
						clearable
						style="width: 100%"
						@change="getAdvertiserList"
					>
						<el-option
							v-for="item in userList"
							:key="item.user_id"
							:label="item.user_name"
							:value="item.user_id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="广告账户ID" label-width="100px" prop="id">
					<el-select
						v-model="search.supplie_id"
						placeholder="请选择广告账户ID"
						filterable
						clearable
						style="width: 100%"
					>
						<el-option
							v-for="item in distributorList"
							:key="item.id"
							:label="item.supplie_id"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="onSubmit" size="medium">提交</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { delEmptyChildren } from "@/utils";
export default {
	name: "BindingDistributorForm",
	data() {
		return {
			form: {
				distributorAccount: ""
			},
			search: {
				biz_id: "",
				supplie_id: "",
				dept_ids: [],
				user_id: ""
			},
			advertiser_id: "",
			visible: false,
			deptList: [], //部门
			userList: [], //组员
			distributorList: [], //广告账户账号
			rules: {
				supplie_id: [{ required: true, message: "请选择广告账户ID", trigger: "change" }],
				dept_ids: [{ required: true, message: "请选择部门", trigger: "change" }],
				user_id: [{ required: true, message: "请选择推广人", trigger: "change" }]
			}
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
			this.getBizRefCompany(biz_id);
			this.initData();
		},
		async initData() {
			const { biz_id } = this.search;

			this.deptList = delEmptyChildren(
				(await this.$store.dispatch("common/getDept", {
					biz_id,
					post: 4,
					needAll: false,
					needCascader: true
				})) || []
			);
		},
		//切换部门
		changeDept() {
			this.getManageDeptUser();
			this.search.user_id = "";
		},
		// 获取组员
		async getManageDeptUser() {
			let { biz_id } = this.search;
			let dept_id = this.search.dept_ids.join();
			this.userList = [];
			const data = await this.$service.user.deptuserlists({
				biz_id,
				dept_id,
				post: 4,
				manage_user: 1
			});
			this.userList = data;
		},
		// 获取对应广告账户账号
		async getAdvertiserList(a) {
			let { biz_id, user_id } = this.search;
			this.distributorList = [];
			let data = await this.$service.config.distributorLists({ biz_id, user_id });
			this.distributorList = data;
		},
		//绑定广告账户
		async onSubmit() {
			this.$refs.formRef.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let { supplie_id } = this.search;
				try {
					await this.$service.config.mediaBindistributor({
						supplie_id,
						advertiser_id: this.advertiser_id
					});
					this.$message.success("绑定成功");
				} catch (error) {
					this.$message.warning("绑定失败，请稍后再试");
				}
				this.visible = false;
				this.$emit("refresh",_,false);
			});
		},
		open(row) {
			this.advertiser_id = row.advertiser_id;
			this.visible = true;
		},
		reset() {
			this.resetForm();
			this.$refs.formRef.resetFields();
		},
		resetForm() {
			(this.search = {
				supplie_id: "",
				dept_ids: [],
				user_id: ""
			}),
				(this.search.biz_id = this.getCurrBiz());
		},
		close() {
			this.visible = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.dialogBox {
	position: relative;
	text-align: center;
}
.btnBox{
	position: absolute;
	right: 0;
	bottom: 0;
}
</style>
